<template>
    <div class="customize-thead">
      <el-dialog class="public-dialog" :title="title" :visible.sync="display" width="800px" :append-to-body="true">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="cancel('ruleForm')">取消</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { addApplication } from '@/api/design'
export default {
    components: {

    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: 'dialog标题'
        }
    },
    watch: {
        show: function(nval){
            this.display = nval; // show改变是同步子组件display的值
        },
        display: function(nval) {
            this.$emit('update:show', nval); // display改变时同步父组件show的值
        }
    },
    data () {
      return {
        display: false,
        ruleForm: {name: ''},
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 3 到 20 个字', trigger: 'blur' }
          ]
        }
      }
    },
    created () {
        
    },
    mounted () {},
    methods: {
      // 关闭dialog 并重置表单
      cancel(formName) {
        this.$refs[formName].resetFields();
        this.display = false
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addApplication()
          } else {
            this.$message('名称不能为空')
            return false
          }
        })
      },
      // 新建应用
      async addApplication() {
        let param = {
          appCode: "",
          appName: this.ruleForm.name,
          icon: "",
          id: null
        }
        let res = await addApplication(param)
        if(res.code == 200) {
          this.$router.push('/nuwaform/design/' + res.data.id)
        }
      }
    }
}
</script>